<template>
  <a-card hoverable :bordered="false" :style="{ width: '100%', marginBottom: '10px' }">
    <div class="kjdh">
      <div class="kjdh_title">
        <div class="kjdh_title_left">待办</div>
        <icon-left-circle style="font-size:20px; color:#68C1B2;" @click="pre"/>
            <div style="font-size:16px; margin:0 6px;"> {{nowPage}}/{{countPage}} </div>
            <icon-right-circle style="font-size:20px; color:#68C1B2;" @click="next"/>
      </div>
      <!-- <a-scrollbar style="height:200px;overflow: auto; margin-top:10px;width:100%; "> -->
        <div style="width:100%;height:165px; margin-top:0px; ">
          <a-row :gutter="10">
            <a-col
              :span="8"
              v-for="(item, i) in list.slice((nowPage - 1) * 6, (((nowPage - 1) * 6) + 6))"
              :key="i"
            >
              <div class="db_item">
                <div class="db_item_icon">
                  <a-image width="50" :src="item.icon" />
                  <!-- <icon-calendar-clock size="35" style="color: #68C1B2" /> -->
                </div>
                <div class="db_item_right">
                  <div>{{ item.name }}</div>
                  <div>
                    <span style="color: #68C1B2; font-size: 18px; font-weight: bold"
                      >{{item.count}}</span
                    >
                    <span>{{ item.unit }}</span>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      <!-- </a-scrollbar> -->
    </div>
  </a-card>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useAppStore, useUserStore } from "@/store";
import syApi from "@/api/home/sy";
import wppkgImg from '@/assets/wppkh.png'
import wblthImg from '@/assets/wblth.png'
import dxcImg from '@/assets/dxc.png'
import dpsImg from '@/assets/dps.png'
import pszImg from '@/assets/psz.png'
import htfhImg from '@/assets/htfh.png'
const rawList = ref([
    {
      name: "待匹配客户",
      unit: "票",
      count: 0,
      roles: ["superAdmin", "dzzy", "yybzg"],
      icon: wppkgImg
    },
    {
      name: "待卸车数量",
      unit: "车",
      count: 0,
      roles: ["superAdmin", "yunshuyuan", "yybzg", "dzzy"],
      icon: dxcImg
    },
    {
      name: "合同复核",
      unit: "条",
      count: 0,
      roles: ["superAdmin", "caiwu"],
      icon: htfhImg
    },
    {
      name: "收款审核",
      unit: "条",
      count: 0,
      roles: ["superAdmin", "caiwu"],
      icon: htfhImg
    },
    {
      name: "待配送的提单车皮数量",
      unit: "车",
      count: 0,
      roles: ["superAdmin", "psgs"],
      icon: dpsImg
    },
    {
      name: "待配送(吨)",
      unit: "吨",
      count: 0,
      roles: ["superAdmin", "psgs"],
      icon: dpsImg
    },
    {
      name: "未办理提货",
      unit: "车",
      count: 0,
      roles: ["superAdmin", "dzzy"],
      icon: wblthImg
    },
  ]);
  const list = ref([])
const roles = ref("");
const userStore = useUserStore();
onMounted(() => {
  roles.value = userStore.roles[0];
  getDbCountInit();
});
const getDbCountInit = () => {
    syApi.getDbCount().then((res) => {
      if (res.code == 200 && res.success) {
        let data = res.data
        rawList.value[0].count = data.kehu_count
        rawList.value[1].count = data.dxc_count
        rawList.value[2].count = data.ht_count
        rawList.value[3].count = data.sh_count
        rawList.value[4].count = data.dps_count
        rawList.value[5].count = data.pick_weight
        rawList.value[6].count = data.th_count
      }
      initList()
    })
    .catch((e) => {
      console.error(e);
    });
};
const nowPage = ref(1)
const pre = () => {
    if(nowPage.value == 1){
        return;
    }
    nowPage.value--;
}
const countPage = ref(1)
const next = () => {
    if(nowPage.value == countPage.value){
        return;
    }
    nowPage.value++;
}
const initList = () => {
    list.value = []
    rawList.value.forEach(e => {
            if(e.roles.includes(roles.value)){
                list.value.push(e)
            }
      })
      countPage.value = list.value.length > 0 ? Math.ceil(list.value.length / 6) : 1
}
</script>
<style scoped>
.kjdh_title {
  display: flex;
  align-items: center;
  justify-content:space-between;
  height:35px;
}
.kjdh_title_left {
  flex:1;
  font-family: PingFang SC;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
  color: #000000;
  padding: 2px 10px;
  border-left: 5px solid #68C1B2;
}
.db_item {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 15px;
  font-size: 14px;
  background-color: #fafafa;
  border-radius: 10px;
  padding: 10px;
}
.db_item_right {
  margin-left: 10px;
}
.db_item_icon {
  /* background: linear-gradient(155.47deg, #ffffff 9.19%, #DCF6F2 92.16%); */
  background: #DCF6F2;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
